<template>
    <div class="box">
        <el-button-group>
            <el-button :type="activeName=='list' ? 'primary': ''" @click="activeName='list'">广告图列表</el-button>
            <el-button :type="activeName=='add' ? 'primary': ''" @click="activeName='add'">添加广告位</el-button>
        </el-button-group>
        <el-card shadow="always" :body-style="{ padding: '20px' }">
            <div v-if="activeName=='list'">
                <el-table :data="advList" border stripe>
                    <el-table-column type="index" label="序号"></el-table-column>
                    <el-table-column prop="id" label="ID编号"></el-table-column>
                    <el-table-column prop="advposname" label="广告位名称"></el-table-column>
                    <el-table-column prop="advposdesc" label="广告位描述"></el-table-column>
                    <el-table-column prop="advpossize" label="广告位尺寸"></el-table-column>
                    <el-table-column prop="advposnum" label="广告数量"></el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button
                                type="primary"
                                icon="el-icon-edit"
                                circle
                                @click="edit(scope.row)"
                            ></el-button>
                            <el-button
                                type="danger"
                                icon="el-icon-delete"
                                circle
                                @click="del(scope.row.id)"
                            ></el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- 分页器 -->
                <el-pagination
                    layout="total, sizes, prev, pager, next"
                    :total="advTotal"
                    :page-sizes="[10,20,30]"
                    @current-change="pageChange"
                    @size-change="sizeChange"
                ></el-pagination>
            </div>
            <div v-else>
                <el-row :gutter="20">
                    <el-col :span="12" :offset="3">
                        <el-form
                            :model="addForm"
                            ref="addForm"
                            :rules="addFormRules"
                            label-width="120px"
                            :inline="false"
                            size="normal"
                        >
                            <el-form-item label="广告位名称" prop="advposname">
                                <el-input v-model="addForm.advposname" placeholder="请输入名称"></el-input>
                            </el-form-item>
                            <el-form-item label="广告位描述" prop="advposdesc">
                                <el-input v-model="addForm.advposdesc" placeholder="请输入描述"></el-input>
                            </el-form-item>
                            <el-form-item label="广告位尺寸" prop="advpossize">
                                <el-input
                                    v-model="addForm.advpossize"
                                    placeholder="宽度,高度。如: 200,300注意英文逗号间隔"
                                ></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="addSubmit">立即创建</el-button>
                                <el-button>取消</el-button>
                            </el-form-item>
                        </el-form>
                    </el-col>
                </el-row>
            </div>
            <!-- 修改弹框 -->
            <el-dialog
                title="修改广告位信息"
                :visible.sync="dialogShow"
                width="30%"
                @close="dialogShow=false"
            >
                <el-form
                    :model="editForm"
                    ref="form"
                    label-width="120px"
                    :inline="false"
                    size="normal"
                >
                    <el-form-item label="广告位名称">
                        <el-input v-model="editForm.advposname" placeholder="请输入名称"></el-input>
                    </el-form-item>
                    <el-form-item label="广告位描述">
                        <el-input v-model="editForm.advposdesc" placeholder="请输入描述"></el-input>
                    </el-form-item>
                    <el-form-item label="广告位尺寸">
                        <el-input
                            v-model="editForm.advpossize"
                            placeholder="宽度,高度。如: 200,300注意英文逗号间隔"
                        ></el-input>
                    </el-form-item>
                </el-form>
                <span slot="footer">
                    <el-button @click="dialogShow = false">取消</el-button>
                    <el-button type="primary" @click="editSubmit">确定</el-button>
                </span>
            </el-dialog>
        </el-card>
    </div>
</template>
<script>
import { mapState, mapActions } from "vuex";
export default {
    data() {
        return {
            activeName: "list",
            addForm: {
                advposname: "",
                advposdesc: "",
                advpossize: "",
            },
            addFormRules: {
                advposname: [
                    {
                        required: true,
                        message: "广告位名称不能为空",
                        triggle: "blur",
                    },
                ],
                advposdesc: [
                    {
                        required: true,
                        message: "广告位描述不能为空",
                        triggle: "blur",
                    },
                ],
                advpossize: [
                    {
                        required: true,
                        message: "广告位尺寸不能为空",
                        triggle: "blur",
                    },
                ],
            },
            dialogShow: false,
            editForm: {
                advposname: "",
                advposdesc: "",
                advpossize: "",
            },
        };
    },
    computed: {
        ...mapState(["advList", "advInfo", "advTotal"]),
    },
    methods: {
        ...mapActions(["getAdvList"]),

        // 页码发生变化
        pageChange(val) {
            this.setMenuInfo({
                act: "getlist",
                start: val,
                pagesize: 10,
            });
            this.getAdvList();
        },
        // 每页数量变化
        sizeChange(val) {
            this.setAdvInfo({
                act: "getlist",
                start: 1,
                pagesize: val,
            });
            this.getAdvList();
        },
        // 添加提交
        addSubmit() {
            this.$refs.addForm.validate(async (valid) => {
                if (valid) {
                    let { data: res } = await this.$axios.post(
                        "api/advpos",
                        Object.assign(this.addForm, { act: "add" })
                    );
                    if (res.code !== 200) return this.$message.error(res.msg);
                    this.$message.success("添加成功");
                    this.activeName = "list";
                    this.getAdvList();
                }
            });
        },
        // 修改点击事件
        edit(row) {
            this.dialogShow = true;
            this.editForm = {
                ...row,
            };
        },
        // 修改提交事件
        async editSubmit() {
            console.log(this.editForm);
            let { data: res } = await this.$axios.post(
                "api/advpos",
                Object.assign(this.editForm, { act: "edit" })
            );
            if (res.code !== 200) return this.$message.error(res.msg);
            this.$message.success("修改成功");
            this.getAdvList();
            this.dialogShow = false;
        },
        // 删除事件
        async del(id) {
            try {
                await this.$confirm("您确定要删除此广告位吗?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                });
                let { data: res } = await this.$axios.get("api/advpos", {
                    params: {
                        id: id,
                        act: "del",
                    },
                });

                if (res.code !== 200) return this.$message.error(res.msg);
                if (this.advInfo.start !== 1 && this.advList.length == 1) {
                    this.setAdvInfo({
                        act: "getlist",
                        start: this.advInfo.start--,
                        pagesize: this.advInfo.pagesize,
                    });
                }
                this.getAdvList();
            } catch (error) {
                this.$message.error("取消删除");
            }
        },
    },
    mounted() {
        this.advList.length || this.getAdvList();
    },
};
</script>
<style scoped lang='less'>
.box {
    text-align: left;
}
.el-card {
    margin-top: 20px;
    text-align: center;
}
</style>
